import React from 'react';
import { Modal, Form, Button, Input, message, Radio, Descriptions, Row, Col } from 'antd';
import { postSubmitAppealSatisfaction } from '@/services/GovernmentTrain/GovernmentTrain';
import styles from './index.less';
import { ModalType } from '@/utils/trainUtil';

const { TextArea } = Input;

interface AppealDetailModalProps {
  type?: string;
  visible?: boolean;
  closeModal: any;
  data: any;
  onSuccess: () => void;
}
const AppealDetailModal: React.FC<AppealDetailModalProps> = (props) => {
  const { type, visible, closeModal, data, onSuccess } = props;
  const { appeal, appealSatisfaction } = data;
  const [form] = Form.useForm();
  const isDetailAdd = type === ModalType.ADD;

  const handleCancel = () => {
    closeModal();
    form.resetFields();
  };
  const handleOK = () => {
    closeModal();
    form.resetFields();
  };
  const handleSubmit = async () => {
    const values = await form.validateFields();
    const { satisfactionEvaluation, detailedEvaluation } = values;
    try {
      postSubmitAppealSatisfaction({
        appealId: appeal?.id,
        detailedEvaluation,
        satisfactionEvaluation,
      }).then(() => {
        closeModal();
        form.resetFields();
        onSuccess();
        message.success('提交成功！');
      });
    } catch (e) {
      message.error('提交失败,请联系管理员');
    }
  };
  const getFooterButtons = (type, appealSatisfaction) => {
    if (type === 'detailAdd') {
      return [
        <Button onClick={() => handleCancel()}>取消</Button>,
        <Button
          type="primary"
          onClick={() => {
            {
              appealSatisfaction?.satisfactionEvaluation && appealSatisfaction?.detailedEvaluation
                ? handleOK()
                : handleSubmit();
            }
          }}
        >
          {appealSatisfaction?.satisfactionEvaluation && appealSatisfaction?.detailedEvaluation
            ? '确定'
            : '提交'}
        </Button>,
      ];
    }
    return [
      <Button onClick={() => handleCancel()}>取消</Button>,
      <Button type="primary" onClick={() => handleOK()}>
        确定
      </Button>,
    ];
  };
  return (
    <Modal
      visible={visible}
      title="查看"
      width={800}
      onCancel={handleCancel}
      onOk={handleOK}
      destroyOnClose={true}
      footer={getFooterButtons(type, appealSatisfaction)}
      className={styles.appealDetailModal}
    >
      <div className={styles.detailWrapper}>
        <div className={styles.aboutAppeal}>
          <div className={styles.TitleBar}>
            <div className={styles.sideShortBar}></div>
            <p className={styles.sideTitle}>关于诉求</p>
          </div>
          <div className={styles.aboutAppealContent}>
            <Descriptions column={2} labelStyle={{ justifyContent: 'flex-end', minWidth: 120 }}>
              <Descriptions.Item label="诉求编码">{appeal?.appealCode}</Descriptions.Item>
              <Descriptions.Item label="诉求部门">{appeal?.handleOrgTitle}</Descriptions.Item>
              <Descriptions.Item label="诉求类别">{appeal?.appealCategoryTitle}</Descriptions.Item>
              <Descriptions.Item label="诉求标题">{appeal?.appealTitle}</Descriptions.Item>
              <Descriptions.Item label="诉求人内容" span={2}>
                {appeal?.appealContent}
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>

        <div className={styles.detailSpace}></div>

        <div className={styles.handleSuggest}>
          <div className={styles.TitleBar}>
            <div className={styles.sideShortBar}></div>
            <p className={styles.sideTitle}>处理建议</p>
          </div>
          <div className={styles.handleSuggestContent}>
            <Descriptions column={2} labelStyle={{ justifyContent: 'flex-end', minWidth: 120 }}>
              <Descriptions.Item label="处理建议" span={2}>
                {appeal?.suggest ? appeal?.suggest : '暂无'}
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>
        {isDetailAdd && (
          <div>
            <div className={styles.detailSpace}></div>
            <div className={styles.userSatisfactionSuggest}>
              <div className={styles.TitleBar}>
                <div className={styles.sideShortBar}></div>
                <p className={styles.sideTitle}>用户满意度评价</p>
              </div>
              <div className={styles.userSatisfactionSuggestContent}>
                <Form form={form}>
                  <Row className={styles.inputItem}>
                    <Col className={styles.itemLabel} span={4}>
                      满意度评价：
                    </Col>
                    <Col className={styles.inputTextContent} span={20}>
                      {appealSatisfaction?.satisfactionEvaluation && (
                        <Radio.Group
                          className={styles.textContent}
                          value={appealSatisfaction?.satisfactionEvaluation}
                          disabled={!!appealSatisfaction?.satisfactionEvaluation}
                        >
                          <Radio value={'01'}>满意</Radio>
                          <Radio value={'02'}>比较满意</Radio>
                          <Radio value={'03'}>不满意</Radio>
                        </Radio.Group>
                      )}
                      {!appealSatisfaction?.satisfactionEvaluation && (
                        <Form.Item
                          name="satisfactionEvaluation"
                          rules={[{ required: true, message: '满意度评价不能为空' }]}
                        >
                          <Radio.Group>
                            <Radio value={'01'}>满意</Radio>
                            <Radio value={'02'}>比较满意</Radio>
                            <Radio value={'03'}>不满意</Radio>
                          </Radio.Group>
                        </Form.Item>
                      )}
                    </Col>
                  </Row>
                  <Row className={styles.inputItem}>
                    <Col className={styles.itemLabel} span={4}>
                      具体评价：
                    </Col>
                    <Col className={styles.inputTextContent} span={20}>
                      {appealSatisfaction?.detailedEvaluation && (
                        <span className={styles.textContent}>
                          {appealSatisfaction?.detailedEvaluation}
                        </span>
                      )}
                      {!appealSatisfaction?.detailedEvaluation && (
                        <Form.Item
                          name="detailedEvaluation"
                          rules={[{ required: true, message: '具体评价不能为空' }]}
                        >
                          <TextArea
                            showCount={true}
                            rows={4}
                            maxLength={100}
                            placeholder="请填写具体评价（100字以内）"
                          />
                        </Form.Item>
                      )}
                    </Col>
                  </Row>
                </Form>
              </div>
            </div>
          </div>
        )}
      </div>
    </Modal>
  );
};
export default AppealDetailModal;
